
{extend name='index/main'}

{block name='main'}
<div class="layui-box">
    <div class="layui-box">
        <fieldset class="layui-elem-field" style="padding:10px;">
            <legend>设置组件</legend>
            <form action="{$setting['url']}" method="post" class="layui-form" lay-filter="component_setting">
                <!--固定设置值-->
                <div class="layui-form-item">
                    <label class="layui-form-label">表格中显示</label>
                    <div class="layui-input-inline" style="width: 50px;">
                        <input type="checkbox" name="intable" lay-skin="switch" lay-text="是|否" {$intable}>
                    </div>
                    <label class="layui-form-label" style="width: 90px;">作为搜索选项</label>
                    <div class="layui-input-inline" >
                        <input type="checkbox" name="insearch" lay-skin="switch" lay-text="是|否" {$insearch}>
                    </div>
                </div>


                <div class="layui-tab layui-tab-card">
                    <ul class="layui-tab-title">
                        <li class="layui-this">基础设置</li>
                        <li>字段设置</li>
                        <li>验证设置</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            {$setting['base'] | raw}
                        </div>
                        <div class="layui-tab-item">
                            {$setting['field'] | raw}
                        </div>
                        <div class="layui-tab-item">
                            {$setting['verify'] | raw}
                        </div>
                    </div>
                </div>
                <div class="layui-form-item" style="margin-left: 36%">
                <div class="layui-input-inline ">
                    <button class="layui-btn" lay-submit data-call-back="save_component">提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
            </form>
        </fieldset>
    </div>
</div>

<script type="text/javascript" src="__PLUGIN_PATH__/layui/layui.js"></script>
<script type="text/javascript" src="__PLUGIN_PATH__/lay-extend-module/config.js"></script>


<script>

    var layer;
    layui.use(['layer','element'],function () {
        layer = layui.layer;
    });

    //组件设置表单提交成功时候的回调函数
    function save_component(msg) {

        if(msg.code == 1){

            var index = parent.layer.getFrameIndex(window.name);
            //当前的iframe
            var now = 'layui-layer-iframe'+index;

            $('.layui-layer-content',parent.document).each(function(i,n){
                if($(n).find('iframe').attr('id') != now){
                    window.font_iframe = $(n);
                }
            });

            try{
                //获取前面一个iframe的对象
                var font_iframe = window.font_iframe.find('iframe');
            }catch (e){
                //p(e);
                layer.msg('请在主页面中打开Error:'+e);
                return;
            }

            //获取前面一个iframe里面的表单预览的对象
            var drake0 = font_iframe.contents().find('.dragula').eq(0); //左边的放置区域


            var drake1 = font_iframe.contents().find('.dragula:gt(0)'); //右边的预设的组件 tab选项卡中三个

            //找到左边当前编辑的组件
            var componnet_item = drake0.find('.layui-form-item').eq(msg.data['form_order']);
            component_type = componnet_item.attr('component-name');

            //移出旧的setting
            componnet_item.find('.__setting').remove();
            //追加新的setting
            componnet_item.append(msg.data['html']);
            //复制设置选项
            var input_hidden_copy = componnet_item.find('input[type=hidden]').clone();

            //添加新的组件
            componnet_item.after(msg.data['new_component']);
            //移除旧的组件
            componnet_item.remove();


            //新生成的组件后面追加编辑按钮 以及设置信息
            var newel = drake0.find('.layui-form-item').eq(msg.data['form_order']);
            newel.append('<div class="layui-input-inline"><a style="float:right" href="javascript:;" onclick="showsetting(this)"  class="layui-btn" ><i class="fa fa-edit"></i>编辑</a></div>')
                .append(input_hidden_copy);


            //右边区域获取组件原始的id (组件渲染的组件需要有 组件名称的class )
            // if(drake1.find('.'+component_type).length > 1){
            //     alert('预设组件中不可以有重复的组件');
            //     return ;
            // }


            var oldid = drake1.find('.'+component_type).attr('id');




            //使用新的设置选项
            var attrset = msg.data['new_component_attr'];

            //调用前面一个iframe 里面的 function 重新渲染 组件
            font_iframe[0].contentWindow.reload_component_render(newel,component_type,oldid,attrset);


            //关闭当前的iframe弹窗
            parent.layer.close(index);



        }



    }

</script>


{/block}




